본문으로 건너뛰기

클래스와 객체의 혼합

객체지향 프로그래밍 (OOP, Object Oriented Programming)에 대해 알아보자.

인스턴스화, 상속, 다형성 등 클래스 관련 기법들을 살펴보기 전에,
클래스 지향을 디자인 패턴으로 조명해보자.

자바스크립트는 클래스 지향 언어가 아니므로, 헷갈릴 수 있다.

4.1 클래스 이론​

클래스와 상속은 특정 구조를 형성해 실행 영역의 문제를 소프트웨어로 모델링하기 위한 방법이다.
자세한 내용은 OOP 책 참고.

4.1.1 클래스 디자인 패턴​

클래스는 절차지향형 코드를 더 구조화하기 위한 디자인 패턴이다.

4.1.2 자바스크립트의 클래스​

  • 자바스크립트에는 클래스가 존재하지 않는다
  • 대신 프로토타입 기반 객체 시스템으로 유사 구현
  • 따라서 클래스는 선택 사항이며, 흉내내는 방식일 뿐이다

4.2 클래스 체계​

4.2.1 건축​

클래스: 청사진
인스턴스: 건축물
→ 설계-구현의 관계

4.2.2 생성자​

클래스 이름과 동일한 이름의 생성자 함수로 인스턴스를 생성
→ 인스턴스를 초기화한다

4.3 클래스 상속​

4.3.1 다형성​

같은 이름의 메서드를 다르게 동작하도록 구현하는 것

4.3.2 다중 상속​

자바스크립트는 다중 상속을 지원하지 않으며, 복잡성과 충돌 가능성이 존재

4.4 믹스인​

자바스크립트 객체는 자동 복사되지 않는다.
객체는 복사된 것이 아니라 연결되어 있다.

믹스인은 프로퍼티를 명시적/암시적으로 복사하거나 빌리는 것

4.4.1 명시적 믹스인​

function mixin(sourceObj, targetObj) {
  for (var key in sourceObj) {
    if (!(key in targetObj)) {
      targetObj[key] = sourceObj[key];
    }
  }
}

var Vehicle = {
  engines: 1,
  ignition: function () {
    console.log('엔진을 켠다');
  },
  drive: function () {
    this.ignition();
    console.log('방향을 맞추고 간다.');
  }
};

var Car = mixin(Vehicle, {
  wheels: 4,
  drive: function() {
    Vehicle.drive.call(this);
    console.log(this.wheels + '개의 바퀴로 굴러간다요');
  }
});

→ Vehicle의 프로퍼티가 Car에 복사됨 (레퍼런스만 복사됨)

다형성 재고​

Vehicle.drive.call(this);
  • 명시적 다형성
  • 자바스크립트는 상대적 다형성 미지원 → 절대 참조 사용
  • 유지보수 어려움

4.4.2 암시적 믹스인​

var Something = {
  cool: function () {
    this.greeting = 'hello world';
    this.count = this.count ? this.count + 1 : 1;
  }
};

Something.cool();
console.log(Something.greeting);  // 'hello world'
console.log(Something.count);     // 1

var Another = {
  cool: function () {
    Something.cool.call(this);
  }
};

Another.cool();
console.log(Another.greeting); // 'hello world'
console.log(Another.count);    // 1

→ call을 사용하여 this를 바꿔 실행

불안정하며 관리가 어려워 신중하게 사용할 것

4.5 정리하기​

  • 자바스크립트는 클래스가 아닌 객체 중심 언어
  • 클래스 지향 패턴은 흉내낼 수 있지만 많은 단점 존재
  • 믹스인, call/bind 기반 재사용은 가능하지만 유지보수 어려움
  • 다형성, 다중 상속은 제한적이고 복잡도 유발